@config.main("Omics Network Analysis") {
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("bootstrap-fileinput-5.2.1/css/fileinput.min.css")">

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Omics Network Analysis")

            <div class="main-body">
                <form class="registration-form col-sm-12 my-form" id="form">

                    <div class="row">


                        @components.file("Upload matrix file1", "matrix", "table1", boxId = "geneBox")
                        @components.file("Upload matrix file2", "matrix2", "table2", boxId = "geneBox")
                        @components.radio("Analysis type", "anatype", "pearson", Seq(("pearson", "pearson"), ("spearman", "spearman")) ,labelBox="3")
                        @components.text("E-mail", "mail", "", label = "3",input = "6")

                    </div>

                    <div class="col-md-12 form-group">
                        <label class="col-sm-3"></label>
                        <button type="button" class="btn my-btn" style="width: 200px" onclick="Run()">
                            Run</button>

                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="@routes.Assets.versioned("bootstrap-fileinput-5.2.1/js/fileinput.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("bootstrap-fileinput-5.2.1/js/locales/es.js")" type="text/javascript"></script>


    <script>

        $(function () {

            formValidation();
        })


        function Run() {
            let form = $("#form");
            let fv = form.data("formValidation");
            fv.validate();
            if (fv.isValid()) {
                let index = MyTable.prototype.processIcon();
                $.ajax({
                    url: "@routes.ToolsController.itcRun()",
                    type: "post",
                    processData: false,
                    contentType: false,
                    data: new FormData($("#form")[0]),
                    xhr: function () {
                        let myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) { //检查upload属性是否存在
                            //绑定progress事件的回调函数
                            let date = new Date();
                            let time = date.getTime();
                            myXhr.upload.addEventListener('progress', function (e) {
                                progressHandlingFunction(e, time)
                            }, false);
                        }
                        return myXhr; //xhr对象返回给jQuery使用
                    },
                    success: function (data) {
                        layer.close(index);
                        window.location.href="/alfalfa/tools/itc/" +data
                    }
                })
            }
        }


        function progressHandlingFunction(e,time) {
            if (e.lengthComputable) {
                let progress = $('#progress');
                progress.attr({value: e.loaded, max: e.total}); //更新数据到进度条
                let time1 = (new Date()).getTime();
                let speed = (e.loaded / 1024) / ((time1 - time) / 1000);
                let percent = e.loaded / e.total * 100;
                progress.html(percent.toFixed(2) + "%   " + parseInt(speed) + "KB/S");
                progress.css('width', percent.toFixed(2) + "%");
            }
        }

        function formValidation() {
            $('#form').formValidation({
                framework: 'bootstrap',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    matrix: {
                        validators: {
                            notEmpty: {
                                message: "Matrix file is required!"
                            }
                        }
                    },
                    matrix2: {
                        validators: {
                            notEmpty: {
                                message: "Matrix file is required!"
                            }
                        }
                    },
                    mail: {
                        validators: {
                            notEmpty: {
                                message: 'E-mail is required！'
                            },
                            emailAddress: {
                                message: "E-mail format error!"
                            }
                        }
                    }
                }
            });
        }


    </script>
}